$color_bg:#73F5FF;
$color_text : #5759A8;
$color_ahover : #1297C7;
$color_alert_frame : #000;
$color_alert_header : #CCC;
$color_button : #333;

@mixin borderradius($piont){
	border-radius: $piont;
	-moz-border-radius:$piont;
	-webkit-border-radius:$piont;
}
@mixin opacity($int){
	opacity:$int;
	-moz-opacity:$int;
	-webkit-opacity:$int;
}

html *{padding:0px;margin: 0px;}
.left{float: left;}
.right{float: right;}
.clear{clear:both;}
.checkbox{
	.box{
		@include borderradius(10px);
		height:10px;
		overflow: hidden;
		border: 1px solid #CCC;
		background-color: #F00;
		padding: 1px;
		width:150px;
		span{
			float: left;
			font-size: 10px;
			color: #FFF;
		}
		.pointer{
			@include borderradius(10px);
			height: 10px;
			background-color: #FFF;
			width: 10px;
			float: right;
		}
	}
}
.alert{
	width:100%;
	height:100%;
	position:relative;
	iframe{
		z-index:1;
		background:$color_alert_frame;
		@include opacity(0.5);
	}
	.divalert{
		z-index:2;
		position:absolute;
		@include borderradius(5);
		.alertheader{
			background-color:$color_alert_header;
		}
		.alertbody{
			padding:5px;
		}
		.alertfooter{
			.alertok{
				@include borderradius(5);
				background-color:$color_button;
			}
			.alertcancel{
				@include borderradius(5);
				background-color:$color_button;
				margin-left:5px;
			}
		}
	}
}
.cc{
	@include borderradius(10px);
	height:20px;
	overflow: hidden;
	border: 1px solid #CCC;
	background-color: #F00;
	padding: 1px;
	width:150px;
	.box{
		@include borderradius(10px);
		height: 20px;
		background-color: #FFF;
		width: 20px;
		float: right;
		position:absolute;
		z-index:2;
	}
	.left{width:50%;float:left;}
	.right{width:50%;float:right;}
}
#header{
	position: fixed;
	top:0px;
	width: 100%;
	height: 30px;
	background-color: $color_bg;
	overflow: hidden;
	.left{
		padding: 5px 0px;
		@extend .left;
		width: 20%;
		text-align: left;
		text-indent: 5px;
	}
	.mid{
		@extend .left;
		padding: 5px 0px;
		width:60%;
		text-align: center;
	}
	.right{
		@extend .left;
		padding: 5px 0px;
		width: 20%;
		text-align: right;
		padding-right: 0px;
	}
}
#contents{
	margin-top: 45px;
	@extend .clear;
}
#footer{
	@extend .clear;
	position: fixed;
	width: 100%;
	bottom: 0px;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	ul {
		overflow: hidden;
		margin: 0px;
		padding: 0px;
		li{
			list-style: none;
			text-align: center;
			@extend .left;
			a{
				display: block;
				padding: 5px 15px;
				line-height: 30px;
				text-align: center;
				background-color:$color_bg;
				@include borderradius(15px); 
				&:hover{
					background-color:$color_ahover;
				};
			}
		}
	}
}
